<template>
  <div class="coupon-main">
    <div class="coupon-content" v-for="(cardStock,index) in cardStockList" :key="index">
      <flexbox class="coupon-bg">
        <flexbox-item :span="4">
          <div class="flex-demo cardLeft">
            ￥{{cardStock.price}}
            <p>{{cardStock.name}}</p>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo cardRight">
            {{cardStock.title}}
          </div>
        </flexbox-item>
      </flexbox>
      <router-link to="/couponDetails">
      <div class="coupon-bottom">{{cardStock.content}}
        <span>查看详情</span>
      </div>
      </router-link>
    </div>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem } from 'vux'
import Data from '@/server/server.js'

export default {
  components: {
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      cardStockList: []
    }
  },
  mounted() {
    this.$store.state.couponCodeData.then(data => {
      this.cardStockList = data
    })
  }
}
</script>
<style scoped>
.coupon-main {
  padding-bottom: 50px;
}
.coupon-content {
  margin: 15px;
  color: #333;
 box-shadow: 3px 3px 5px #e5e5e5;
}
.coupon-bg {
  background: #fff;
}
.cardLeft {
  text-align: center;
  color: #f43530;
  padding-top: 10px;
  padding-bottom: 20px;
  font-size: 1.5rem;
}
.cardLeft p {
  font-size: 0.8rem;
}
.cardRight p {
  font-size: 0.8rem;
  color: #999999;
}
.coupon-bottom {
  padding: 6px 15px;
  background: #f7f7f7;
  color: #999999;
  font-size: 0.8rem;
}
.coupon-bottom span {
  float: right;
}
</style>
